<template>
  <a-space class="padding-right" style="cursor: pointer">
    <a-tooltip
      :title="rowIdsIndex == 0 ? '无数据' : '上一条'"
      v-if="rowIds.length != 1"
    >
      <a-icon
        type="up"
        :style="{
          cursor: rowIdsIndex == 0 ? 'no-drop' : 'pointer',
          color: rowIdsIndex == 0 ? '#bfbfbf' : '',
        }"
        @click="rowChange('up')"
    /></a-tooltip>
    <a-tooltip
      :title="rowIdsIndex == rowIds.length - 1 ? '无数据' : '下一条'"
      v-if="rowIds.length != 1"
    >
      <a-icon
        type="down"
        :style="{
          cursor: rowIdsIndex == rowIds.length - 1 ? 'no-drop' : 'pointer',
          color: rowIdsIndex == rowIds.length - 1 ? '#bfbfbf' : '',
        }"
        @click="rowChange('down')"
    /></a-tooltip>

    <a-tooltip title="刷新">
      <a-icon type="reload" @click="rowChange('reload')"
    /></a-tooltip>
  </a-space>
</template>

<script>
export default {
  name: "worksheet-title",
  computed: {},
  data() {
    return {
      rowIdsIndex: this.$utils.arrayIndexOf(this.rowIds, this.rowId),
      rowIdNow: this.rowId,
    };
  },
  props: {
    rowId: {
      type: String,
    },
    rowIds: {
      type: Array,
    },
  },
  methods: {
    /**
     * 数据改变
     * @param type
     */
    rowChange(type) {
      var index = this.$utils.arrayIndexOf(this.rowIds, this.rowIdNow);
      switch (type) {
        case "up": //上一条
          if (index != 0) {
            this.rowIdNow = this.rowIds[index - 1];
            this.rowIdsIndex = index - 1;
            this.$emit("change", this.rowIdNow);
          }
          break;
        case "down": //下一条
          if (index != this.rowIds.length - 1) {
            this.rowIdNow = this.rowIds[index + 1];
            this.rowIdsIndex = index + 1;
            this.$emit("change", this.rowIdNow);
          }
          break;
        default:
          this.$emit("change", this.rowIdNow);
          break;
      }
    },
  },
};
</script>

<style lang="less"></style>
